<template>
	<view>
		<view class="flextit">
			<view>{{ciku.typeName}}</view>
			<button type="primary" size="mini" data-target="RadioModal" @tap="showModal">导入生词本( {{num}} )</button>
		</view>
		<view class="dcbox" v-for="(item,index) in arr" :key="index">
			<view class="tit">
				<view class="dctit">{{item.word}}</view>
				<radio :checked="item.checked" @click="fn(item,index)"></radio>
			</view>
			<view>{{item.means}}</view>
		</view>
		<view class="cu-modal" :class="modalName=='RadioModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<radio-group class="block" @change="RadioChange">
					<view class="cu-list menu text-left">
						<view class="cu-item" v-for="(item,index) in fzlist" :key="index">
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub">{{item.groupName}}</view>
								<radio class="round" :class="item.groupId== fzid ?'checked':''"
									:checked="item.groupId == fzid ? true : false" @click="xzfz(item.groupId)"></radio>
							</label>
						</view>
						<view class="cu-bar bg-white">
							<view class="action text-blue" @tap="hideModal">取消</view>
							<view class="action text-green" @tap="daorufn">确定</view>
						</view>
					</view>
				</radio-group>
			</view>
		</view>
	</view>
</template>

<script>
	import {groupList} from "../../utils/fenzu.js"
	import {addgroupWord} from "../../utils/ciku.js"
	import {
		listByTypeId
	} from "../../utils/ciku.js"
	export default {
		data() {
			return {
				ciku: {},
				list: [],
				num: 0,
				daoru: [],
				page: 0,
				arr: [],
				modalName: null,
				radio: '0',
				fzlist:[],
				fzid:0
			}
		},
		onLoad(e) {
			this.ciku = e
		},
		created() {
			this.danci()
			this.fz()
		},
		//到底加载
		onReachBottom() {
			this.pagelist()
		},

		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			RadioChange(e) {
				this.radio = e.detail.value
			},
			xzfz(id){
				this.fzid = id
			},
			//导入生词本
			async daorufn() {
				const {data:res} = await addgroupWord(this.fzid,this.daoru)
				console.log(res.data)
				this.modalName = null
				uni.showToast({
					title:"导入成功"
				})
			},
			//分组列表
			async fz(){
				let id = this.$store.state.user.id
				const {data:res} = await groupList(id)
				this.fzlist = res.data
				console.log(this.fzlist)
			},
			//分页加载
			pagelist() {
				let x = this.page
				console.log(x)
				for (let i = x; i <= x + 10; i++) {
					this.arr.push(this.list[i])
					this.page = i
				}
				
			},
			//初始请求
			async danci() {
				uni.showLoading({
					title: '加载中...'
				})
				const {
					data: res
				} = await listByTypeId(this.ciku.typeId)
				res.data.forEach((item) => {
					item.checked = false
				})
				this.list = res.data
				console.log(this.list)
				this.pagelist()
				uni.hideLoading()
			},
			fn(item, index) {
				// console.log(item.wid)
				this.list[index].checked = !this.list[index].checked
				this.forlist()
			},
			forlist() {
				let a = 0
				this.daoru = []
				this.list.forEach((item, index) => {
					if (item.checked) {
						a++
						this.daoru.push(item.wid)
					}
				})
				// console.log(this.daoru)
				this.num = a
			}
		}
	}
</script>

<style scoped>
	.flextit {
		padding: 20px;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 999;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	uni-button {
		margin: 0 !important;
	}

	uni-button[type=primary] {
		background-color: #23B48D;
	}

	.dcbox {
		border-radius: 5px;
		background-color: #FFFFFF;
		margin: 10px 15px;
		padding: 10px;
		box-sizing: border-box;
	}

	.tit {
		display: flex;
		justify-content: space-between;
	}

	.dctit {
		font-weight: bold;
		font-size: 18px;
		color: #23B48D;
	}
</style>
